<template>
  <div class="page">
    <header-bar></header-bar>
    <div class="top">
      <div style="position:relative;">
        <el-image :src="src"></el-image>
        <div class="head">
          <!--头像-->
          <div class="face">
            <el-avatar :size="70" :src="url">
              <el-avatar icon="el-icon-user-solid" :size="70"></el-avatar>
            </el-avatar>
          </div>
          <!--昵称和个签-->
          <span class="font-name">{{userInfo.Name}}</span>
          <span class="font-sign">{{userInfo.Sign}}</span>
        </div>
      </div>
      <el-menu
        :default-active="activedMenu($route.path)"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <i class="el-icon-video-camera"></i>
          <span>视频</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-star-off"></i>
          <span>收藏</span>
        </el-menu-item>
        <!--<el-menu-item index="3">
                    <i class="el-icon-time"></i>
                    <span>历史</span>        
        </el-menu-item>-->
        <el-menu-item index="4">
          <i class="el-icon-upload2"></i>
          <span>投稿</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-chat-dot-round"></i>
          <span>消息</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span>设置</span>
        </el-menu-item>
        <div class="count">
          <el-menu-item index="7">
            <span>关注</span>
            <span>{{followingCount}}</span>
          </el-menu-item>
          <el-menu-item index="8" class="count">
            <span>粉丝</span>
            <span>{{followerCount}}</span>
          </el-menu-item>
        </div>
      </el-menu>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderBar from "../../components/headerBar";
import storageService from "../../utils/storageService";
import { getFollowCount } from "../../api/relations";
import { imgUrl, faceUrl } from "../../utils/url";
export default {
  data() {
    return {
      src: imgUrl + "background.webp",
      url: faceUrl + this.$store.state.userInfo.Face,
      followingCount: "",
      followerCount: "",
    };
  },
  components: {
    "header-bar": HeaderBar,
  },
  computed: {
    userInfo() {
      if (storageService.get(storageService.USER_TOKEN)) {
        return this.$store.state.userInfo;
      } else {
        return null;
      }
    },
  },
  methods: {
    activedMenu(val) {
      switch (val) {
        case "/mine/video":
          return "1";
        case "/mine/favorites":
          return "2";
        case "/mine/upload":
          return "4";
        case "/mine/message/system":
          return "5";
        case "/mine/message/user":
          return "5";
        case "/mine/setting":
          return "6";
      }
    },
    handleSelect(key) {
      switch (key) {
        case "1":
          this.$router.push({ name: "myVideo" });
          break;
        case "2":
          this.$router.push({ name: "favorites" });
          break;
        case "4":
          this.$router.push({ name: "upload" });
          break;
        case "5":
          this.$router.push({ name: "systemMsg" });
          break;
        case "6":
          this.$router.push({ name: "setting" });
          break;
        case "7":
          this.$router.push({ name: "following" });
          break;
        case "8":
          this.$router.push({ name: "follower" });
          break;
      }
    },
    _getFollowCount() {
      getFollowCount(this.$store.state.userInfo.Uid).then((res) => {
        this.followingCount = res.data.data.following_count;
        this.followerCount = res.data.data.follower_count;
      });
    },
  },
  created() {
    this._getFollowCount();
  },
};
</script>

<style>
.page {
  background-color: #eef6f9;
}

.top {
  margin: auto;
  width: 1280px;
}

.face {
  position: absolute;
  bottom: 20px;
  left: 15px;
}

.font-name {
  position: absolute;
  bottom: 55px;
  left: 100px;
  font-size: 18px;
  font-weight: bold;
  color: snow;
}

.font-sign {
  position: absolute;
  bottom: 30px;
  left: 100px;
  font-size: 14px;
  color: #2e2e2e;
}

.count {
  display: flex;
  float: right;
}
</style>